<template>
  <div class="main-style">
    <div class="book-type">
      <tiny-layout :cols="cols">
        <tiny-row>
          <tiny-col :span="3">
          </tiny-col>
          <tiny-col :span="6">
            <tiny-row style="height: 50px;line-height: 50px;">
              <tiny-col :span="2">
                总裁豪门
              </tiny-col>
              <tiny-col :span="2">
                种田经商
              </tiny-col>
              <tiny-col :span="2">
                玄幻仙侠
              </tiny-col>
              <tiny-col :span="2">
                宫闱宅斗
              </tiny-col>
              <tiny-col :span="2">
                古代情缘
              </tiny-col>
              <tiny-col :span="2">
                年代重生
              </tiny-col>
            </tiny-row>
            <tiny-row style="height: 50px;line-height: 50px;">
              <tiny-col :span="2">
                东方玄幻
              </tiny-col>
              <tiny-col :span="2">
                异界大陆
              </tiny-col>
              <tiny-col :span="2">
                穿越历史
              </tiny-col>
              <tiny-col :span="2">
                异术超能
              </tiny-col>
              <tiny-col :span="2">
                都市高手
              </tiny-col>
              <tiny-col :span="2">
                都市修仙
              </tiny-col>
            </tiny-row>
          </tiny-col>
          <tiny-col :span="3"></tiny-col>
        </tiny-row>
      </tiny-layout>

    </div>

    <tiny-layout :cols="cols" style="height: 600px;">
      <tiny-row class="hot-row" >
        <tiny-col :span="12">
          <span class="hot-row-name" style="font-size: 20px; font-weight: 600;padding-top: 10px;"> 排行榜 ></span>
        </tiny-col>
      </tiny-row>
      <tiny-row :gutter="20">
        <template v-for="(item,index) in data.hotList ">
            <tiny-col :span="3" >
              <div class="hot-itemList-one" v-if="index==0">
                    <tiny-row>
                    <tiny-col :span="12" class="hot-title">
                      <span class="hot-cell"> {{item.name}} ></span>
                    </tiny-col>
                  </tiny-row>
                <ul class="hot-cell">
                  <li class="hot-list active" v-for=" (cell,num) in item.data"  @mouseover="handleMouseOver">
                    <div style="display: flex;" >
                      <div class="hot-list-num" v-if="num==0"><tiny-image  class="tag-img" :src="require('@/assets/book/one.png')" fit="fit"></tiny-image></div>
                        <div  class="hot-list-num" v-else-if="num==1"><tiny-image  class="tag-img" :src="require('@/assets/book/two.png')" fit="fit"></tiny-image></div>
                        <div class="hot-list-num" v-else-if="num==2"><tiny-image  class="tag-img" :src="require('@/assets/book/three.png')"  fit="fit"></tiny-image></div>
                        <div class="hot-list-num" v-else>
                          {{ num+1 }}
                        </div>
                        <span class="hot-list-name">  {{ cell.name }} </span>
                    </div>
                    <div  class="active-image">
                      <tiny-image   style="width: 80px;height: 100px;" :src="cell.img" fit="fit"></tiny-image>
                    </div>
                    </li>
                </ul>
            </div>
            <div v-else class="hot-itemList">
              <tiny-row>
                    <tiny-col :span="12" class="hot-title">
                      <span class="hot-cell"> {{item.name}} ></span>
                    </tiny-col>
                  </tiny-row>
                <ul class="hot-cell">
                  <li class="hot-list" v-for=" (cell,num) in item.data">
                  <div class="hot-list-num" v-if="num==0"><tiny-image  class="tag-img" :src="require('@/assets/book/one.png')" fit="fit"></tiny-image></div>
                      <div  class="hot-list-num" v-else-if="num==1"><tiny-image  class="tag-img" :src="require('@/assets/book/two.png')" fit="fit"></tiny-image></div>
                      <div class="hot-list-num" v-else-if="num==2"><tiny-image  class="tag-img" :src="require('@/assets/book/three.png')"  fit="fit"></tiny-image></div>
                      <div class="hot-list-num" v-else>
                        {{ num+1 }}
                      </div>
                      <span class="hot-list-name">  {{ cell.name }} </span>
                    
                    </li>
                </ul>
            </div>
          </tiny-col>
        </template>
      </tiny-row>
    </tiny-layout>

    <tiny-layout :cols="cols" style="height: 450px;">
      <tiny-row class="hot-row" >
        <tiny-row>
          <tiny-col>
            <div style="font-size: 20px; font-weight: 600;">
              {{ data.gbcb.name }}
            </div>
          </tiny-col>
        </tiny-row>
      </tiny-row>
      <template v-for="item in data.gbcb.data">
        <tiny-row style="height: 150px; margin: 20px 0;">
          <template v-for="(item ,num) in item.data">
            <tiny-col :span="3">
             <div style="display: flex;">
              <tiny-image style="width: 110px;height: 150px;" :src="item.img"></tiny-image>
              <div style="padding-left: 10px;display: flex;flex-direction: column;justify-content: space-between;">
                <div style=" margin-top: 5px;">
                <div style="font-size: 16px">{{ item.name }}</div>
                <div style="font-size: 12px;padding: 5px 0;color: #55514c;">{{ item.author }}</div>
                </div>
                <div style="font-size: 12px; color: #915109;">{{ item.remark }}</div>
              </div>
             </div>
            </tiny-col>
          </template>
          
        </tiny-row>
      </template>
    
    </tiny-layout>
    <tiny-layout :cols="cols" style="height: 420px;">
      <tiny-row >
        <template v-for="(item,num) in data.typeTop">
          <tiny-col :span="3">
              <tiny-row style="padding:10px 0 ;">
                <tiny-col :span="12">
                  <div style="font-size: 20px; font-weight: 600; color: #d83737;">
                    {{ item.name }}>
                  </div>
                </tiny-col>
              </tiny-row>   
              <ul >
                <li  v-for=" (cell,num) in item.data">
                    <div style="display: flex;">
                        <div v-if="num==0" style="display: flex;">
                          <div>
                            <tiny-image style="width: 110px;height: 150px;"  class="tag-img" :src="cell.img" fit="fit"></tiny-image>
                        </div>
                          <div style="padding-left: 10px;display: flex;flex-direction: column;justify-content: space-between;">
                              <div style=" margin-top: 5px;">
                              <div style="font-size: 16px">{{ cell.name }}</div>
                              <div style="font-size: 12px;padding: 5px 0;color: #55514c;">{{ cell.author }}</div>
                              </div>
                              <div style="font-size: 12px; color: #915109;">{{ cell.remark }}</div>
                            </div>

                        </div>
                        <div v-else  style="display: flex; padding:10px 0;">
                          <div  style="width: 10px;  text-align: center; width: 40px; font-size: 18px;  font-weight: 600;">
                          {{ num+1 }}
                        </div>
                        <span >  {{ cell.name }} </span>
                        </div>
                        
                    </div>
                </li>
              </ul>

              </tiny-col>
        </template>
    </tiny-row>
    </tiny-layout>
    <tiny-layout :cols="cols" style="height: auto;">
      <tiny-row :gutter="20">
        <tiny-col :span="8">
          <div style="font-size: 20px; font-weight: 600;">
            最近更新>
          </div>
        </tiny-col>
        <tiny-col :span="4">
          <div style="font-size: 20px; font-weight: 600;">
            完结榜*女生>
          </div>
         
        </tiny-col>
      </tiny-row>
      <tiny-row :gutter="40">
        <tiny-col :span="8">
          <div>
            <vo-table ref="yuTable" :data="data.newData"
             :toolBar="data.newData.toolBar"
             size="medium"
             :stripe="false" 
             :row-class-name="rowClassName"
             >
            </vo-table>
          </div>
        </tiny-col>
        <tiny-col :span="4">
          <div>
            <ul >
              <li  v-for=" (cell,num) in data.doneBook.gril">
                  <div style="display: flex;">
                      <div v-if="num==0" style="display: flex;">
                        <div>
                          <tiny-image style="width: 110px;height: 150px;"  class="tag-img" :src="cell.img" fit="fit"></tiny-image>
                      </div>
                        <div style="padding-left: 10px;display: flex;flex-direction: column;justify-content: space-between;">
                            <div style=" margin-top: 5px;">
                            <div style="font-size: 16px">{{ cell.name }}</div>
                            <div style="font-size: 12px;padding: 5px 0;color: #55514c;">{{ cell.author }}</div>
                            </div>
                            <div style="font-size: 12px; color: #915109;">{{ cell.remark }}</div>
                          </div>

                      </div>
                      <div v-else  style="display: flex; padding:10px 0;">
                        <div  style="width: 10px;  text-align: center; width: 40px; font-size: 18px;  font-weight: 600;">
                        {{ num+1 }}
                      </div>
                      <span >  {{ cell.name }} </span>
                      </div>
                      
                  </div>
              </li>
            </ul>
        </div>

        <div style="font-size: 20px; font-weight: 600;">
            完结榜*男生>
          </div>

          <div>
            <ul >
              <li  v-for=" (cell,num) in data.doneBook.man">
                  <div style="display: flex;">
                      <div v-if="num==0" style="display: flex;">
                        <div>
                          <tiny-image style="width: 110px;height: 150px;"  class="tag-img" :src="cell.img" fit="fit"></tiny-image>
                      </div>
                        <div style="padding-left: 10px;display: flex;flex-direction: column;justify-content: space-between;">
                            <div style=" margin-top: 5px;">
                            <div style="font-size: 16px">{{ cell.name }}</div>
                            <div style="font-size: 12px;padding: 5px 0;color: #55514c;">{{ cell.author }}</div>
                            </div>
                            <div style="font-size: 12px; color: #915109;">{{ cell.remark }}</div>
                          </div>

                      </div>
                      <div v-else  style="display: flex; padding:10px 0;">
                        <div  style="width: 10px;  text-align: center; width: 40px; font-size: 18px;  font-weight: 600;">
                        {{ num+1 }}
                      </div>
                      <span >  {{ cell.name }} </span>
                      </div>
                      
                  </div>
              </li>
            </ul>
        </div>

        </tiny-col>
      </tiny-row>
    </tiny-layout>
   
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, getCurrentInstance } from 'vue';
let { proxy } = getCurrentInstance();

const rowClassName = ({ rowIndex }) => {
  if (rowIndex & 1) {
    return 'row_word_red'
  }
}

  const handleMouseOver = (event) => {
      // 处理鼠标滑过事件
      console.log('鼠标滑过', event);
      event.currentTarget.className = 'active hot-list';
    };


const data = reactive({
  hotList: { hgril: [] },
  gbcb:{name:'改编与出版' ,data:[]},
  typeTop:{},
  newData:{data:[],cols:[],toolBar:{right:false}},
  doneBook:{gril:[],man:[]}

})
data.doneBook.gril=[
      { name: '登雀枝', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e34700dbd8bcabef596ba33eed4d9786_360x480.jpg',author:'二月春' ,remark:'已获得海外翻译、影视改编、广播剧改编'},
      { name: '穿成农门恶婆婆', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e93b01f256674a1076e3becadf74d413_360x480.jpg' ,author:'遇花期',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '私婚密爱', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/69a8698fa1c18b5774ea07e3afc3140b_360x480.jpg' ,author:'顾小易',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '登雀枝', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e34700dbd8bcabef596ba33eed4d9786_360x480.jpg',author:'二月春' ,remark:'已获得海外翻译、影视改编、广播剧改编'},
      { name: '穿成农门恶婆婆', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e93b01f256674a1076e3becadf74d413_360x480.jpg' ,author:'遇花期',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '私婚密爱', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/69a8698fa1c18b5774ea07e3afc3140b_360x480.jpg' ,author:'顾小易',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
]
data.doneBook.man=[
      { name: '登雀枝', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e34700dbd8bcabef596ba33eed4d9786_360x480.jpg',author:'二月春' ,remark:'已获得海外翻译、影视改编、广播剧改编'},
      { name: '穿成农门恶婆婆', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e93b01f256674a1076e3becadf74d413_360x480.jpg' ,author:'遇花期',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '私婚密爱', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/69a8698fa1c18b5774ea07e3afc3140b_360x480.jpg' ,author:'顾小易',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '登雀枝', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e34700dbd8bcabef596ba33eed4d9786_360x480.jpg',author:'二月春' ,remark:'已获得海外翻译、影视改编、广播剧改编'},
      { name: '穿成农门恶婆婆', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e93b01f256674a1076e3becadf74d413_360x480.jpg' ,author:'遇花期',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '私婚密爱', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/69a8698fa1c18b5774ea07e3afc3140b_360x480.jpg' ,author:'顾小易',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
]

data.newData.cols = [
    {title: '分类', key: 'bookType', width: 120, align: 'center',  tooltip: true},
    {title: '书名', key: 'bookName', align: 'center', tooltip: true},
    {title: '最新章节', key: 'newChartper', align: 'center', tooltip: true},
    {title: '作者', key: 'author', align: 'center', tooltip: true},
    {title: '更新时间', key: 'update', align: 'center', tooltip: true},
  ];
  data.newData.data=[
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
    {bookType:' 宫闱宅斗',bookName:'试婚逃妾',newChartper:'第9章 夫妻和睦，家宅安宁',author:'雨山雪',update:'2024-06-09 17:41'},
  ]

data.typeTop=[
  {name:'种田经商', url:'' ,data:[
      { name: '登雀枝', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e34700dbd8bcabef596ba33eed4d9786_360x480.jpg',author:'二月春' ,remark:'已获得海外翻译、影视改编、广播剧改编'},
      { name: '穿成农门恶婆婆', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e93b01f256674a1076e3becadf74d413_360x480.jpg' ,author:'遇花期',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '私婚密爱', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/69a8698fa1c18b5774ea07e3afc3140b_360x480.jpg' ,author:'顾小易',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
  ] },
  {name:'权谋天下', url:'' ,data:[
      { name: '登雀枝', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e34700dbd8bcabef596ba33eed4d9786_360x480.jpg',author:'二月春' ,remark:'已获得海外翻译、影视改编、广播剧改编'},
      { name: '穿成农门恶婆婆', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e93b01f256674a1076e3becadf74d413_360x480.jpg' ,author:'遇花期',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '私婚密爱', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/69a8698fa1c18b5774ea07e3afc3140b_360x480.jpg' ,author:'顾小易',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
  ] },
  {name:'历史', url:'' ,data:[
      { name: '登雀枝', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e34700dbd8bcabef596ba33eed4d9786_360x480.jpg',author:'二月春' ,remark:'已获得海外翻译、影视改编、广播剧改编'},
      { name: '穿成农门恶婆婆', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e93b01f256674a1076e3becadf74d413_360x480.jpg' ,author:'遇花期',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '私婚密爱', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/69a8698fa1c18b5774ea07e3afc3140b_360x480.jpg' ,author:'顾小易',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
  ] },
  {name:'异界大陆', url:'' ,data:[
      { name: '登雀枝', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e34700dbd8bcabef596ba33eed4d9786_360x480.jpg',author:'二月春' ,remark:'已获得海外翻译、影视改编、广播剧改编'},
      { name: '穿成农门恶婆婆', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e93b01f256674a1076e3becadf74d413_360x480.jpg' ,author:'遇花期',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '私婚密爱', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/69a8698fa1c18b5774ea07e3afc3140b_360x480.jpg' ,author:'顾小易',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
  ] },
]
data.gbcb.data=[
  {
    name:'one',data:[
      { name: '登雀枝', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e34700dbd8bcabef596ba33eed4d9786_360x480.jpg',author:'二月春' ,remark:'已获得海外翻译、影视改编、广播剧改编'},
      { name: '穿成农门恶婆婆', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/e93b01f256674a1076e3becadf74d413_360x480.jpg' ,author:'遇花期',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '私婚密爱', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/69a8698fa1c18b5774ea07e3afc3140b_360x480.jpg' ,author:'顾小易',remark:'已获得海外翻译、影视改编、广播剧改编' },
      { name: '医妃别装了王爷有读心术', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b198ac3422e3896189fb941a1ee9ae9c_360x480.jpg' ,author:'陆宁一',remark:'已获得海外翻译、影视改编、广播剧改编' },
    ]
  },
  {
    name:'two',data:[
      { name: '不败战神', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/9b74a7256c2dd57e06668d4d5cdc7300_360x480.jpg',author:'必焱' ,remark:'已进行广播剧、网络微短剧和，漫画改编'},
      { name: '原来我是世外高人', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/b7e95666a44b167c9013ad3ce197b2ae_360x480.jpg' ,author:'葡萄',remark:'已进行广播剧、动画改编，并授权海外翻译' },
      { name: '灵宠创造模拟器', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/ed1fc5f2927455be4a29af055fddb77d_360x480.jpg' ,author:'夜刃',remark:'已进行广播剧和漫画改编' },
      { name: '最强学霸系统', url: '', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/fadb8c52576aa6c3516308d757c020cf_360x480.jpg' ,author:'佛系和尚',remark:'已进行广播剧和漫画改编' },
    ]
  }
  ]
data.hotList = [
  {name:'大热榜女生',url:'',data:[
    { name: '离婚后她惊艳了世界', url: '',author:'二月春', img: 'https://cdn.wtzw.com/bookimg/public/images/cover/a3c6/9b74a7256c2dd57e06668d4d5cdc7300_360x480.jpg' },
    { name: '禁止离婚！陆少夜夜跪地轻哄', author:'二月春',url: '', img: '' },
    { name: '大佬归来，假千金她不装了', author:'二月春',url: '', img: '' },
    { name: '霍先生乖乖宠我', url: '', author:'二月春',img: '' },
    { name: '重生七零再高嫁', url: '', author:'二月春',img: '' },
    { name: '我废柴真千金，会亿点玄学怎么了',author:'二月春', url: '', img: '' },
    { name: '重生七零：糙汉老公掐腰宠', author:'二月春',url: '', img: '' },
    { name: '第一瞳术师',author:'二月春', url: '', img: '' },
    { name: '陆太太，陆先生今晚回来过夜',author:'二月春', url: '', img: '' },
    { name: '新婚老公不孕不育，我却怀孕了',author:'二月春', url: '', img: '' },
  ]},
  {name:'大热榜男',url:'',data:[
    { name: '离婚后她惊艳了世界', url: '', img: '' },
    { name: '禁止离婚！陆少夜夜跪地轻哄', url: '', img: '' },
    { name: '大佬归来，假千金她不装了', url: '', img: '' },
    { name: '霍先生乖乖宠我', url: '', img: '' },
    { name: '重生七零再高嫁', url: '', img: '' },
    { name: '我废柴真千金，会亿点玄学怎么了', url: '', img: '' },
    { name: '重生七零：糙汉老公掐腰宠', url: '', img: '' },
    { name: '第一瞳术师', url: '', img: '' },
    { name: '陆太太，陆先生今晚回来过夜', url: '', img: '' },
    { name: '新婚老公不孕不育，我却怀孕了', url: '', img: '' },
  ]},
  {name:'新书榜女生',url:'',data:[
    { name: '离婚后她惊艳了世界', url: '', img: '' },
    { name: '禁止离婚！陆少夜夜跪地轻哄', url: '', img: '' },
    { name: '大佬归来，假千金她不装了', url: '', img: '' },
    { name: '霍先生乖乖宠我', url: '', img: '' },
    { name: '重生七零再高嫁', url: '', img: '' },
    { name: '我废柴真千金，会亿点玄学怎么了', url: '', img: '' },
    { name: '重生七零：糙汉老公掐腰宠', url: '', img: '' },
    { name: '第一瞳术师', url: '', img: '' },
    { name: '陆太太，陆先生今晚回来过夜', url: '', img: '' },
    { name: '新婚老公不孕不育，我却怀孕了', url: '', img: '' },
  ]},
  {name:'新书榜男生',url:'',data:[
    { name: '离婚后她惊艳了世界', url: '', img: '' },
    { name: '禁止离婚！陆少夜夜跪地轻哄', url: '', img: '' },
    { name: '大佬归来，假千金她不装了', url: '', img: '' },
    { name: '霍先生乖乖宠我', url: '', img: '' },
    { name: '重生七零再高嫁', url: '', img: '' },
    { name: '我废柴真千金，会亿点玄学怎么了', url: '', img: '' },
    { name: '重生七零：糙汉老公掐腰宠', url: '', img: '' },
    { name: '第一瞳术师', url: '', img: '' },
    { name: '陆太太，陆先生今晚回来过夜', url: '', img: '' },
    { name: '新婚老公不孕不育，我却怀孕了', url: '', img: '' },
  ]},
]




</script>
<style>
.tiny-grid .tiny-grid-body__row{
  background-color: #f6f8fa;
}
.tiny-grid .tiny-grid-body__row td{
  border: none;
}

</style>
<style lang="scss" scoped>
.active{
  .active-image{
    display: none;
  }

}
.book-img{
  width: 75px;
  height: 100px;
}
.hot-row{
  padding:15px 0;
  .hot-row-name{
    color: red;
  }

}
.hot-itemList-one{
  border-radius: 10px;
  background: linear-gradient(180deg, #cf3b3b 0%, #FFFFFF 33%, #FFFFFF 100%)
}

.hot-itemList{
  border-radius: 10px;
  background: linear-gradient(180deg,#F5F6F7 0%, #FFFFFF 33%, #FFFFFF 100%);

  }
  .hot-title{
    font-size: 18px;
    font-weight: 600;
    padding:10px 0px;
    
  }

  .hot-cell{
    margin-left: 10px;
    .hot-list {
    padding: 5px 0;
    display: flex;
    .tag-img{
      width: 30px;
      height: 30px;
    }
    .hot-list-num{
      text-align: center;
      width: 40px;
      font-size: 18px;
      font-weight: 600;
    }
    .hot-list-name{
      font-size: 14px;
    }
  }

}


.main-style {
  padding: 0 20%;
  background: #f6f8fa;
}

.book-type {
  position: relative;
  height: 100px;
  background: #ffffff;
  border-radius: 10px;
  margin-top: -30px;
  z-index: 10;
}
</style>
